<template>
  <div>
    <el-dialog
      title="评价详情"
      :visible="open"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
      append-to-body
      @close="cancel()"
    >
      <div class="titleLineGreen">评价信息</div>
      <el-form
        ref="form1"
        style="margin-top: 20px"
        :model="form"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="课程" prop="workstationeName">
              <div style="white-space: pre-wrap">
                {{ form.courseName }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作站" prop="uncheckReason">
              <div style="white-space: pre-wrap">
                {{ form.workstationName ? form.workstationName : '--' }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="评价人" prop="uncheckReason">
              <div style="white-space: pre-wrap">
                {{ form.studentName }}({{ form.studentNum }})
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价时间" prop="uncheckReason">
              <div style="white-space: pre-wrap">
                {{ parseTime(form.studentEvaluateTime) }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="titleLineGreen">评价详情</div>
      <el-form
        ref="form1"
        style="margin-top: 20px"
        :model="form"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="总分" prop="total">
              <div style="height: 36px" class="flexColCenter">
                <el-rate
                  :value="item.totalStar ? item.totalStar.toFixed(1) - 0 : 0"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}分"
                >
                </el-rate>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="能力水平" prop="ability_star">
              <div style="height: 36px" class="flexColCenter">
                <el-rate
                  :value="form.abilityStar"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}分"
                >
                </el-rate>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="敬业精神" prop="dedicated_star">
              <div style="height: 36px" class="flexColCenter">
                <el-rate
                  :value="form.dedicatedStar"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}分"
                >
                </el-rate>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教学热情" prop="enthusiasmStar">
              <div style="height: 36px" class="flexColCenter">
                <el-rate
                  :value="form.enthusiasmStar"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}分"
                >
                </el-rate>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="titleLineGreen">评价文案</div>
      <el-form
        ref="form3"
        style="margin-top: 20px"
        :model="form"
        label-width="80px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="评价" prop="uncheckReason">
              <div style="white-space: pre-wrap">
                {{ form.commentToTeacher ? form.commentToTeacher : '--' }}
              </div>
            </el-form-item>
          </el-col>
        </el-row
        >
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: flex-end"
      >
        <el-button v-preventReClick @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPost_evaluateInfo } from '@/api/course/course'
import { parseTime } from '@/utils/cc'

export default {
  props: {
    open: Boolean,
    item: Object,
    teacherId: String
  },
  data() {
    return {
      form: {}
    }
  },
  watch: {
    async open(e) {
      if (e) {
        let res = await getPost_evaluateInfo(this.item.courseStuId, this.teacherId)
        this.form = res.data
        res.data.abilityStar = res.data.abilityStar ? res.data.abilityStar : 0
        res.data.dedicatedStar = res.data.dedicatedStar
          ? res.data.dedicatedStar
          : 0
        res.data.enthusiasmStar = res.data.enthusiasmStar
          ? res.data.enthusiasmStar
          : 0
        this.form.avgEvaluateStar =
          (res.data.abilityStar +
            res.data.dedicatedStar +
            res.data.enthusiasmStar) /
          3
      }
    }
  },
  mounted() {
  },
  methods: {
    parseTime,
    reset() {
      this.$refs['form1'].resetFields()
      this.$refs['form3'].resetFields()
    },
    cancel() {
      this.$emit('update:open', false)
      this.reset()
    }
  }
}
</script>
<style scoped lang="scss">
</style>
